<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 盒子模型实例</title>
    <style>
        /* 基础样式重置，避免浏览器默认边距干扰 */
        body {
            margin: 0;
            padding: 20px;
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
        }
        /* 盒子模型实例样式 */
        .box-demo {
            /* 内容区尺寸 */
            width: 200px;
            height: 150px;
            /* 内边距：上下15px，左右20px */
            padding: 15px 20px;
            /* 边框：2px 实线 深蓝色 */
            border: 2px solid #1e50b3;
            /* 外边距：上下10px，左右自动（实现水平居中） */
            margin: 10px auto;
            /* 背景色：浅蓝色（仅作用于内容区+内边距） */
            background-color: #e6f0ff;
            /* 文本样式：便于观察内容区 */
            color: #333;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="box-demo">
        这是盒子模型的内容区<br>
        内容区宽度：200px，高度：150px<br>
        内边距：上下15px，左右20px<br>
        边框：2px 实线深蓝色<br>
        外边距：上下10px，水平居中
    </div>
</body>
</html>